<script setup lang="ts">
import dayjs from 'dayjs';
import { ref } from 'vue';
import 'dayjs/locale/zh-cn';
import Phone from './Phone.vue';


defineProps<{
}>()

</script>

<template>
  		<div class="monitor-table">
			
			<div class="left"></div>
			<div class="right"></div>
			<div style=" position: absolute;
					scale: 0.5;
					transform:rotate3d(0,1,0,50deg)
							  rotate3d(1,0,0,85deg)  ;
					margin-top: 11.4em;
					margin-left: 6em;
					z-index:1000;
			"><Phone :isPower="true" bgColor="#098"/></div>
			<div class="center"></div>
			<div class="up"></div>
		</div>
</template>

<style scoped>
	.monitor-table{
		width: 40em;
		height: 27em;
		margin-top: -20em;
		perspective: 100em;
	}
	.monitor-table .up{
		width:40em;
		height: 30em;
		background-color: rgb(94 55 2);
		transform: rotate3d(1,0,0,68deg) translate3d(0,-3em,0);
		box-shadow: 0 0 4em #000;
	}
	.monitor-table .center{
		position: absolute;
		background-color:  rgb(59 35 1);
		width: 40em;
		height: 30em;
		transform: rotate3d(1,0,0,70deg) translate3d(0,-4em,0) translate3d(0,0,-4em);
		box-shadow: 0 1em 2em #000;
	}
	.monitor-table .left{
		position: absolute;
		width:30em;
		height: 7em;
		top:14em;
		background-color:  rgb(60, 35, 0);
		transform: rotate3d(0,1,0,90deg) rotate3d(0,0,1,-20deg) translate3d(0,0,-14em) ;
		box-shadow: 0 0 em rgb(60, 35, 0);
	}
	.monitor-table .right{
		position: absolute;
		width:30em;
		height: 7em;
		top:14em;
		background-color: rgb(60, 35, 0);
		transform: rotate3d(0,1,0,90deg) rotate3d(0,0,1,-20deg)   translate3d(0,0,24em);
	}
	
	
</style>